<template>
  <div class="container">
    <div class="main">
      <div class="header">
        <el-button type="primary" @click="add">新建</el-button>
        <el-input placeholder="请输入关键字搜索" v-model="searchTable" style="width: 200px;" />
        <el-button type="info" @click="query">查询</el-button>
        <el-button type="info" @click="SX">重置</el-button>
      </div>
      <el-table :data="tableData" border class="eltable">
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="ck_name" label="出库名称"></el-table-column>
        <el-table-column prop="rk_code" label="入库编号"></el-table-column>
        <el-table-column prop="ck_code" label="仓库编号"></el-table-column>
        <el-table-column label="入库状态">
          <template #default="{ row }">
            <span v-if="row.rk_state == 1">
              {{ zt.obj1 }}
            </span>
            <span v-if="row.rk_state == 2">
              {{ zt.obj2 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="rk_jhrksj" label="计划入库时间"></el-table-column>
        <el-table-column prop="wldb_code" label="物料编号"></el-table-column>
        <el-table-column prop="wldb_dblx" label="调拨类型"></el-table-column>
        <el-table-column prop="rk_type" label="入库类型"></el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <el-button type="text" @click="xq(row)">详情</el-button>
            <span v-if="row.rk_state == 1">
              <el-button type="text" @click="sh(row)">审核</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
        :total="totalItems" layout="total, prev, pager, next, jumper">
      </el-pagination>
    </div>
  </div>
  <!-- 详情  -->
  <el-dialog v-model="xqdialogVisible" title="详情" height="800">
    <el-form :model="xqform" :inline="true" class="demo-form-inline">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="入库类型">
            <el-input v-model="xqform.rk_type" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="调拨类型">
            <el-input v-model="xqform.wldb_dblx" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划入库时间">
            <el-input v-model="xqform.rk_jhrksj" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="入库仓库">
            <el-input v-model="xqform.rk_code" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="xqtableData" border class="eltable">
      <el-table-column prop="rkxx_id" label="序号" width="100"></el-table-column>
      <el-table-column prop="rkxx_code" label="入库详细编码" width="200"></el-table-column>
      <el-table-column prop="rkxx_wlmc" label="物料名称"></el-table-column>
      <el-table-column prop="rkxx_wlfl" label="物料分类"></el-table-column>
      <el-table-column prop="rkxx_ggxh" label="规格型号"></el-table-column>
      <el-table-column prop="rkxx_rksl" label="入库数量"></el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="xqdialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
  <!-- 详情  -->
  <el-dialog v-model="shdialogVisible" title="详情" height="800">
    <div class="mb-2 ml-4">
      <el-radio-group v-model="radio">
        <el-radio value="1" size="large">通过</el-radio>
        <el-radio value="2" size="large">撤销</el-radio>
      </el-radio-group>
    </div>
    <el-form :model="shform" :inline="true" class="demo-form-inline">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="入库类型">
            <el-input v-model="shform.rk_type" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="调拨类型">
            <el-input v-model="shform.wldb_dblx" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划入库时间">
            <el-input v-model="shform.rk_jhrksj" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="入库仓库">
            <el-input v-model="shform.rk_code" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="负责人">
            <el-select v-model="shform.rk_fzr" placeholder="选择负责人" style="width: 200px" @change="handleLeaderChange">
              <el-option v-for="item in usertableData" :key="item.user_id" :label="item.user_uname"
                :value="item.user_id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="shtableData" border class="eltable">
      <el-table-column prop="rkxx_id" label="序号" width="60"></el-table-column>
      <el-table-column prop="rkxx_code" label="入库详细编码" width="160"></el-table-column>
      <el-table-column prop="rkxx_wlmc" label="物料名称"></el-table-column>
      <el-table-column prop="rkxx_wlfl" label="物料分类"></el-table-column>
      <el-table-column prop="rkxx_ggxh" label="规格型号"></el-table-column>
      <el-table-column prop="rkxx_rksl" label="入库数量"></el-table-column>
      <el-table-column label="入库库区" width="130">
        <template #default="{ row }">
          <el-select v-model="row.rkkq" placeholder="选择入库库区" style="width: 100px" @change="handleLeaderChange">
            <el-option v-for="item in kqtableData" :key="item.kq_code" :label="item.kq_name" :value="item.kq_code"
              @click="cxkw(item.kq_code)" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="入库库位" width="130">
        <template #default="{ row }">
          <el-select v-model="row.rkkw" placeholder="选择入库库位" style="width: 100px" @change="handleLeaderChange">
            <el-option v-for="item in kwtableData" :key="item.kw_code" :label="item.kw_name" :value="item.kw_code" />
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="shdialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="shqr">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
    import { ref, reactive, router,computed } from 'vue';  
    import axios from 'axios'
    import { ElMessage, ElMessageBox } from 'element-plus';
  
  export default {  
    setup() {  
      const searchKey = ref('');  
      const treeData = ref([]);    
      const tableData = ref([]);  
      const usertableData = ref([]);
      const kqtableData = ref([]);
      const kwtableData = ref([]);
      const xqtableData = ref([]);
      const shtableData = ref([]);
      const selectedFilter = ref('');  
      const searchTable = ref('');  
      const currentPage = ref(1);  
      const pageSize = ref(10); 
      const radio = ref('1')  
      //获取登录角色数据
      const uid=computed(()=>{
             return sessionStorage.getItem('u');
      })
      let yhid=reactive({
              id:uid
      })
      let xqdialogVisible=ref(false);
      let shdialogVisible=ref(false);
      const totalItems = ref(3); 
      let zt=reactive({
        obj1:'待入库',
        obj2:'已入库',
      })
      let xqform=reactive({
        rk_id:'',
        ck_name:'',
        rk_code:'',
        ck_code:'',
        rk_jhrksj:'',
        wldb_code:'',
        wldb_dblx:'',
        rk_type:'',
        uid:yhid.id
      }) 
      let shform=reactive({
        rk_id:'',
        ck_name:'',
        rk_code:'',
        ck_code:'',
        rk_jhrksj:'',
        wldb_code:'',
        wldb_dblx:'',
        rk_type:'',
        rk_fzr:'',
        ckb_code:'',
        uid:yhid.id
      }) 
      async function SX(){
        // 查询逻辑  
        try {
          const response = await axios.get('/api/WMS_RK/GetCXWMS_RK?PageNumber='+currentPage.value+'&PageSize='+pageSize.value);
          tableData.value=response.data.cXWMS_RKs;
          totalItems.value=response.data.zon;
        } catch (error) {
          console.error("请求错误:", error);
           ElMessage.error("服务器错误，请稍后重试。");
        }
      }
      SX()
      async function xq(row){
        xqdialogVisible.value=true
        xqform.rk_id=row.rk_id,
        xqform.ck_name=row.ck_name,
        xqform.rk_code=row.rk_code,
        xqform.ck_code=row.ck_code,
        xqform.rk_jhrksj=formatDate(row.rk_jhrksj),
        xqform.wldb_code=row.wldb_code,
        xqform.wldb_dblx=row.wldb_dblx,
        xqform.rk_type=row.rk_type
        const response = await axios.get('/api/WMS_RKXX/GetWMS_RKXX?code='+row.rk_code)
        xqtableData.value=response.data
      }
      async function sh(row){
        shdialogVisible.value=true
        shform.rk_id=row.rk_id,
        shform.ck_name=row.ck_name,
        shform.rk_code=row.rk_code,
        shform.ck_code=row.ck_code,
        shform.rk_jhrksj=formatDate(row.rk_jhrksj),
        shform.wldb_code=row.wldb_code,
        shform.wldb_dblx=row.wldb_dblx,
        shform.rk_type=row.rk_type,
        shform.ckb_code=row.ckb_code
        const response = await axios.get('/api/WMS_RKXX/GetWMS_RKXX?code='+row.rk_code)
        shtableData.value=response.data
        const response1 = await axios.get('/api/User/GetUser')
        usertableData.value=response1.data
        const response2 = await axios.get('/api/Wbd_kq/Getcode?code='+row.ck_code)
        kqtableData.value=response2.data
      }
      const query = () => {  
        // 查询逻辑  
        console.log('Querying with:', searchTable.value);  
      };   
  
      const handleCurrentChange = (page) => {  
        currentPage.value = page;  
        SX()
        // 分页逻辑  
        console.log('Current page:', page);  
      };  
      async function shqr(){
        console.log(shform);
        if(radio.value=='1'){
          try {
            const response = await axios.put('/api/WMS_RK/UpdatWMS_RK?fzr='+shform.rk_fzr+'&uid='+shform.uid+'&code='+shform.rk_code+'&zt=2')
            if(response.data){
              const response = await axios.put('/api/WLDB/Updatezt?state=3&code='+shform.wldb_code)
              if(response.data){
                for(const team of shtableData.value){
                  const response = await axios.get('/api/WMS_KC/GetWMS_KCDHDL?ck_code='+shform.ck_code+'&kq_code='+team.rkkq+'&kw_code='+team.rkkw+'&wl_code='+team.wl_code)
                  if(response.data!=''){
                    const response1 =await axios.put('/api/WMS_KC/UpdateWMS_KCXGSL?code='+response.data+'&sl='+team.rkxx_rksl);
                  }else{
                    const now = new Date();
                    const year = now.getFullYear();
                    const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1并补零
                    const day = String(now.getDate()).padStart(2, '0'); // 补零
              
                    // 生成四位随机数
                    const randomNumber = Math.floor(1000 + Math.random() * 9000); // 生成1000到9999之间的随机数
              
                    // 拼接时间字符串和随机数
                    const formattedTime = `${year}${month}${day}`;
                    let id=`kc${formattedTime}${randomNumber}`
                    const response = await axios.post('/api/WMS_KC/PostWMS_KC',{
                      kc_code: id,
                      kw_code: team.rkkw,
                      kq_code: team.rkkq,
                      ck_code: shform.ck_code,
                      wl_code: team.wl_code,
                      kc_sl: team.rkxx_rksl
                    })
                  }
                }
              }
            }
            ElMessage.success("成功")
            SX()
            shdialogVisible.value=false
          } catch (error) {
            console.error("请求错误:", error);
             ElMessage.error("服务器错误，请稍后重试。");
          }
        }else{
          try {
            const response = await axios.put('/api/WMS_RK/UpdatWMS_RK?fzr='+shform.rk_fzr+'&uid='+shform.uid+'&code='+shform.rk_code+'&zt=3')
            if(response.data){
              const response = await axios.put('/api/WLDB/Updatewldbrkzt?state=2&code='+shform.wldb_code+'&rk_code='+'');
              if(response.data){
                const response = await axios.put('/api/WMS_CKB/UpdateWMS_CK?fzr='+shform.rk_fzr+'&uid='+yhid.id+'&code='+shform.ckb_code+'&zt=1')
                  if(response.data){
                    for(const team of shtableData.value){
                      const response =await axios.put('/api/WMS_KC/UpdateWMS_KCCXSL?code='+team.kc_code+'&sl='+team.rkxx_rksl);
                    }
                  }
              }
               ElMessage.success("成功")
              SX()
              shdialogVisible.value=false
            } 
          } catch (error) {
            console.error("请求错误:", error);
             ElMessage.error("服务器错误，请稍后重试。");
          }
        }
      }
      async function cxkw(code){
        const response = await axios.get('/api/Wbd_kw/Getkw?code='+code)    
        kwtableData.value=response.data
      }
      const formatDate = (dateString) => {
        if (!dateString) return '';
        const date = new Date(dateString);
        return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
      };
      // 确保所有函数都被返回  
      return {  
        searchKey,  
        treeData,  
        tableData,  
        selectedFilter,  
        searchTable,  
        currentPage,  
        pageSize,  
        totalItems,  
        query,    
        handleCurrentChange,  
        zt,
        xqdialogVisible,
        xq,
        xqform,
        xqtableData,
        shtableData,
        shform,
        shdialogVisible,
        sh,
        usertableData,
        radio,
        shqr,
        kqtableData,
        kwtableData,
        cxkw,
        SX,
        formatDate
      };  
    },  
  };  
  </script>

<style>
.container {
  display: flex;
  gap: 20px;
  height: 95%;
}

.sidebar {
  height: 100%;

}

.main {
  width: 80%;
  flex: 1;
  height: 100%;
}

.header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.eltable {
  height: 95%;
  font-size: 80%;
}

.letree {
  height: 100%;
}
</style>